import type { NoticeType } from '../api/interface'
import { history } from 'umi'
import { observer, useLocalObservable } from 'mobx-react'
import { useEffect } from 'react'
import { getWeek, getDate } from '@/utils/formatterDate'
import { queryNoticeDetail } from '../api'
import NavBar from '@/components/Global/NavBar'
import styles from './index.module.less'
import LineImg from '@/static/notice/line.png'
import FileIcon from '@/static/notice/fileIcon.png'
import { downloadFile } from '@/utils/downloadFile'

export default observer(() => {
    const store = useLocalObservable(() => ({
        detail: {} as Partial<NoticeType>,
        /** 专业大类 */
        majorDict: {} as Record<string, string>,

        /** 培训级别 */
        levelDict: {} as Record<string, string>,

        queryDetail: async (id: string) => {
            const res = await queryNoticeDetail(id)
            if (res.data) {
                store.detail = (res.data as unknown) as NoticeType
            }
        },
    }))

    const queryParams = history.location.query as { id: string }

    useEffect(() => {
        if (queryParams.id) {
            store.queryDetail(queryParams.id as string)
        }
    }, [queryParams.id, store])

    const formatterDate = (date?: string) => {
        if (date) {
            return getDate(date, 'YYYY-MM-DD') + ` (${getWeek(date)}) `
        } else {
            return ''
        }
    }

    return (
        <div className={styles.page}>
            <NavBar title={'公告详情'} />
            <div className={styles.headerView}>
                <h4>{store.detail.title}</h4>
                <div className={styles.headerInfo}>
                    <span>文号： {store.detail.document_code} </span>
                    <span>日期： {formatterDate(store.detail.create_time)}</span>
                </div>
                <div className={styles.company}>发文单位： {store.detail.create_user_name}</div>
            </div>
            <img src={LineImg} className={styles.sliceView} />
            <div
                className={styles.fileContent}
                dangerouslySetInnerHTML={{
                    __html: store.detail.content || '',
                }}
            />
            {store.detail.attachments?.length ? (
                <div className={styles.fileList}>
                    <h6>附件：</h6>
                    {store.detail.attachments?.map(item => {
                        return (
                            <div className={styles.fileListItem} key={item.id}>
                                <div>
                                    <img src={FileIcon} />
                                    <div className={styles.fileName}>{item.file_name}</div>
                                </div>
                                <a onClick={() => downloadFile(item.url, item.file_name)}>下载</a>
                            </div>
                        )
                    })}
                </div>
            ) : null}
        </div>
    )
})
